<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>JSON to Dart</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="static/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="static/css/github.css">

</head>

<body class="bg-light">
    <div class="container">
        <div class="py-5 text-center">
            <h2>JSON to Dart</h2>
            <p class="lead">Paste your JSON in the textarea below, click convert and get your Dart classes for free.</p>
        </div>
        <div class="row code-row">
            <div class="col-12 col-md-4">
                <form onsubmit="return false;">
                    <div class="form-group">
                        <label for="jsonEditor">JSON</label>
                        <div id="jsonEditor"></div>
                    </div>
                    <input class="form-control mb-2" id="dartClassName" placeholder="Your dart class name goes here">
                    <button type="submit" class="btn btn-primary">Generate Dart</button>
                    <label><input type="checkbox" id="private-fields"> Use private fields</label>
                    <button id="copy-clipboard" class="mt-2 btn btn-secondary" disabled>Copy Dart code to clipboard</button>
                </form>
            </div>
            <div class="col-12 col-md-8">
                <b id="invalid-dart" style="display: none">The Dart code generated is invalid</b>
                <pre><code class="dart"></code></pre>
                <textarea style="position:fixed;opacity: 0;" id="hidden-dart"></textarea>
            </div>
        </div>
        <footer class="my-5 pt-5 text-muted text-center text-small">
            <p class="mb-1">Handcrafted by Javier Lecuona</p>
            <ul class="list-inline">
                <li class="list-inline-item">
                    <a href="https://github.com/javiercbk">Github</a>
                </li>
                <li class="list-inline-item">
                    <a href="https://github.com/javiercbk/json_to_dart">json_to_dart Code</a>
                </li>
                <li class="list-inline-item">
                    <a href="https://twitter.com/javiercbk">Twitter</a>
                </li>
            </ul>
        </footer>
    </div>
    <script src="static/js/highlight.min.js"></script>
    <script src="static/js/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/js/ace-mode-json.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/js/ace-theme-github.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/js/page.js"></script>
</body>

</html>